<template>
  <view class="wrap" :style="{height:screenHeight+'px',background: tabStatus ? '#ffffff' : '#F2F2F2'}">
     <top-tab tabTitle="下级开户" @backClick="backClick" backColor="#5B2177"/>
		 <view class="tba-box">
			 <view class="level" :class="tabStatus ? 'acltve' : ''" @click="levelClick">下级开户</view>
			 <view class="code" :class="tabStatus ? '' : 'acltve'" @click="codeTab">邀请码</view>
		 </view>
		 <view class="level-main" v-if="tabStatus">
			 <view class="title-input">
				 <view class="title">视频标题</view>
				 <input placeholder="请输入视频标题" v-model="fromData.title" placeholder-style="font-size: 30rpx;color: #999999;"/>
			 </view>
			 <view class="title-input" style="margin: 23rpx 0 40rpx 0;">
				 <view class="title">设置佣金</view>
				 <input placeholder="请输入佣金比例" type="digit" v-model="fromData.rebateRate" placeholder-style="font-size: 30rpx;color: #999999;"/>
			 </view>
			<!-- <view class="explain">说明：这是佣金比例的描述说明</view> -->
			 <view class="create-code" @click="inviteCode">生成邀请码</view>
		 </view>
		 <!-- 邀请码 -->
		 <view v-else class="level-code-table">
			<uni-table border stripe emptyText="暂无更多数据" >
			    <!-- 表头行 -->
			    <uni-tr>
			        <uni-th align="center" width="35">序号</uni-th>
			        <uni-th align="center" width="50">名称</uni-th>
			        <uni-th align="center" width="55">佣金比例</uni-th>
							<uni-th align="center" width="100">链接</uni-th>
							<uni-th align="center" width="42">二维码</uni-th>
							<uni-th align="center" width="80">设置</uni-th>
			    </uni-tr>
			    <!-- 表格数据行 -->
			    <uni-tr v-for="(item,index) in tabData" :key="item.id">
			        <uni-td>{{index + 1}}</uni-td>
			        <uni-td>{{item.schemeName}}</uni-td>
			        <uni-td>{{item.rebateRate}}</uni-td>
							<uni-td>{{item.address}}</uni-td>
							<uni-td>
								<view @click="codeClick(item.inviteCode)">
									<tki-qrcode
										cid="tid"
										:loadMake="true"
										:size="40" ref="qrcode"
										:val="item.inviteCode"
										style="line-height: 0;"
									 />
								</view>
							</uni-td>
							<uni-td>
								<view class="td-copy" @click="copy(item.address)">复制</view>
								<!-- <view class="td-blue">分享</view> -->
								<view class="td-delter" @click="deleteCode(item.id,index)">删除</view>
							</uni-td>
			    </uni-tr>
			</uni-table>
		 </view>
		 <!-- 弹出层 -->
		 <uni-popup ref="popup" type="center">
				<tki-qrcode
					ref="qrcode"
				  :showLoading="false"
					:size="300"
				 	:loadMake="true"
				 	:val="popupCode"
					:onval="onval"
				  />
		 </uni-popup>
  </view>
</template>

<script>
	import topTab from '@/components/top-tabbar.vue'
	import { $POST, $GET } from '@/network/api.js'
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
  export default {
		components: { topTab, tkiQrcode },
    data() {
      return {
				onval: true,
				qrsize: 120,
				popupCode: '', // 大图二维码
				fromData: { // 生成邀请码参数
					rebateRate: '', // 佣金比例
					title: "" // 视频标题
				},
				screenHeight: uni.getSystemInfoSync().screenHeight, // 屏幕高度
				tabData: [], // 列表数据
				tabStatus: true,
			}
    },
  onLoad() {
		this.codeList()
	},
  methods: {
		// 删除
		deleteCode(id,index) {
			$POST(`/boke-user/user/reduce/${id}`).then(res => {
				uni.showToast({	title:'删除成功',icon:'none' })
				this.codeList()
			})
		},
		// 复制
		copy(item) {
			const vm = this
			uni.setClipboardData({
				data: item,
				success: function () {
					uni.showToast({	title:'复制成功',icon:'none' })
				}
			})
		},
		// 二维码大图
		codeClick(code) {
			this.popupCode = code
			this.$refs.popup.open()
		},
		// 生成邀请码
		async inviteCode() {
			if(!this.fromData.title) {
				uni.showToast({title: "请输入视频标题", icon:'none'})
				return false
			}
			if(!this.fromData.rebateRate){
				uni.showToast({title: "请输入佣金比例", icon:'none'})
				return false
			}
			const res = await $POST("/boke-user/user/spread",this.fromData)
			if(res.code === "0000000") {
				this.fromData.title = ''
				this.fromData.rebateRate = ''
				uni.showToast({title: "邀请码生成成功！", icon:'none'})
				this.tabStatus = false
			}
			
		},
		// 邀请码列表
		async codeList() {
			const res = await $GET("/boke-user/user/spreads")
			this.tabData = res.data
		},
		// tab
		levelClick() {
			this.tabStatus = true
		},
		// tab
		codeTab () {
			this.tabStatus = false
			this.codeList()
		},
		// 返回上一页
		backClick() {
			uni.navigateTo({
			    url: '/pages/my/agency/agency'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
	.wrap{
		// background: #F2F2F2;
	.tba-box{
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20rpx 0;
		font-size: 30rpx;
		color: #B743ED;
		.level{
			width: 200rpx;
			height: 68rpx;
			border: 2rpx solid #B742ED;
			border-radius: 10rpx 0px 0px 10rpx;
			line-height: 68rpx;
			text-align: center;
			box-sizing: border-box;
		}
		.acltve{
			color: #FFFFFF !important;
			background: #B743ED !important;
		}
		.code{
			width: 200rpx;
			height: 68rpx;
			background: #FFFFFF;
			border: 2rpx solid #B742ED;
			border-radius: 0px 10rpx 10rpx 0px;
			line-height: 68rpx;
			text-align: center;
			box-sizing: border-box;
		}
	}
	.level-main{
		padding: 0 30rpx;
		.title-input{
			width: 100%;
			height: 89rpx;
			background: #F7F7F7;
			line-height: 89rpx;
			display: flex;
			align-items: center;
			.title{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #222222;
				padding: 0 72rpx 0 28rpx;
			}
		}
		.explain{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			padding-left: 27rpx;
		}
		.create-code{
			width: 540rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #B83DF1, #852CAE);
			border-radius: 44rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin: auto;
			margin-top: 600rpx;
			
		}
	}
	.level-code-table{
		/deep/ .uni-table-th {
			height: 89rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			box-sizing: border-box;
			padding: 0 !important;
			line-height: 89rpx;
		}
		 /deep/ .uni-table {
		    table-layout:fixed;
		  }
		/deep/ .uni-table-td {
			font-size: 24rpx;
			// height: 89rpx;
			// line-height: 89rpx;
			padding: 8rpx 0 !important;
			text-align: center !important;
			word-wrap:break-word;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
		}
		.td-delter,.td-copy,.td-blue{
			display: inline-block;
			width: 60rpx;
			height: 40rpx;
			line-height: 20px;
			text-align: center;
			background: #EE4242;
			border-radius: 5rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
		.td-copy{
			background: #10B86B;
			margin-right: 12rpx;
		}
		
	}
	}
</style>
